<script setup lang="ts">
import { ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  CanvasRenderer,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const OptionPie1 = ref({
  legend: {
    top: "bottom",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: [15, 60],
      center: ["50%", "50%"],
      roseType: "radius",
      itemStyle: {
        borderRadius: 5,
      },
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      data: [
        { value: 40, name: "电器" },
        { value: 38, name: "服饰鞋类" },
        { value: 32, name: "生活用品" },
        { value: 30, name: "美妆护肤" },
        { value: 28, name: "食品" },
      ],
    },
  ],
});

const OptionPie2 = ref({
  legend: {
    top: "bottom",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: [15, 60],
      center: ["50%", "50%"],
      roseType: "radius",
      itemStyle: {
        borderRadius: 5,
      },
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      data: [
        { value: 40, name: "电器" },
        { value: 38, name: "服饰鞋类" },
        { value: 32, name: "生活用品" },
        { value: 30, name: "美妆护肤" },
        { value: 28, name: "食品" },
      ],
    },
  ],
});
</script>

<template>
  <div class="bottom_charts">
    <div class="li_1">
      <span class="title">业绩达成率</span>
      <el-progress type="circle" :percentage="90">
        <template #default="{ percentage }">
          <span
            class="percentage-label"
            style="font-size: 13px; color: #888; line-height: 30px"
          >
            完成率
          </span>
          <br />
          <span
            class="percentage-value"
            style="font-size: 23px; font-weight: 600"
          >
            {{ percentage }}%
          </span>
        </template>
      </el-progress>
      <div class="btm_box">
        <div class="money_box">
          <span>销售目标 (元)</span>
          <span>350000</span>
        </div>
        <div class="money_box">
          <span>回款金额 (元)</span>
          <span>300000</span>
        </div>
      </div>
    </div>

    <v-chart class="pie_chart" :option="OptionPie1" autoresize />

    <div class="bar_chart">
      <div class="progress_box">
        <div class="name_money">
          <span>供应商一</span>
          <span>$19083.12</span>
        </div>
        <el-progress :stroke-width="17" :percentage="80">
          <template #default=""> </template>
        </el-progress>
      </div>
    </div>

    <v-chart class="pie_chart" :option="OptionPie2" autoresize />
  </div>
</template>

<style scoped lang="less">
.bottom_charts {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 25px 5px;
}
.li_1 {
  width: 18%;
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  border: 1px solid #eee;
  padding: 5px;
  border-radius: 15px;
  .el-progress {
    width: 126px;
    height: 126px;
    margin: 0 auto;
    margin-top: 30px;
  }
  .btm_box {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    .money_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span:first-child {
        font-size: 12px;
        color: #888;
      }
      span:last-child {
        font-size: 17px;
        font-weight: 600;
        line-height: 50px;
      }
    }
  }
}
.pie_chart {
  width: 20%;
  height: 280px;
  border: 1px solid #eee;
  border-radius: 12px;
}
.bar_chart {
  width: 35%;
  height: 280px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  .progress_box {
    display: flex;
    flex-direction: column;
    padding: 15px;
    .name_money {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
  :deep(.el-progress__text) {
    display: none;
  }
}
</style>
